import {createNamespace} from '../utils';
import Info from '../info';

var _createNamespace = createNamespace('tab'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    props: {
        dot: Boolean,
        type: String,
        info: [Number, String],
        color: String,
        title: String,
        isActive: Boolean,
        ellipsis: Boolean,
        disabled: Boolean,
        scrollable: Boolean,
        activeColor: String,
        inactiveColor: String,
        swipeThreshold: Number
    },
    computed: {
        style: function style() {
            var style = {};
            var color = this.color,
                isActive = this.isActive;
            var isCard = this.type === 'card'; // card theme color

            if (color && isCard) {
                style.borderColor = color;

                if (!this.disabled) {
                    if (isActive) {
                        style.backgroundColor = color;
                    } else {
                        style.color = color;
                    }
                }
            }

            var titleColor = isActive ? this.activeColor : this.inactiveColor;

            if (titleColor) {
                style.color = titleColor;
            }

            if (this.scrollable && this.ellipsis) {
                style.flexBasis = 88 / this.swipeThreshold + "%";
            }

            return style;
        }
    },
    methods: {
        onClick: function onClick() {
            this.$emit('click');
        }
    },
    render: function render() {
        var h = arguments[0];
        return h("div", {
            "attrs": {
                "role": "tab",
                "aria-selected": this.isActive
            },
            "class": [bem({
                active: this.isActive,
                disabled: this.disabled,
                complete: !this.ellipsis
            }), {
                'van-ellipsis': this.ellipsis
            }],
            "style": this.style,
            "on": {
                "click": this.onClick
            }
        }, [h("span", {
            "class": bem('text')
        }, [this.slots() || this.title, h(Info, {
            "attrs": {
                "dot": this.dot,
                "info": this.info
            }
        })])]);
    }
});